<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.page.partition')">
            <el-select
              v-model="formInline.partitionId"
              placeholder
              @visible-change="hasPartitionOptions">
              <el-option
                v-for="(item,index) in partitionOptions"
                :key="index"
                :label="item.partitionname"
                :value="item.partitionid"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.page.location')">
            <el-input maxlength="20" show-word-limit v-model="formInline.locationCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="SKU">
            <el-input maxlength="20" show-word-limit v-model="formInline.productSpecCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.productname')">
            <el-input maxlength="20" show-word-limit v-model="formInline.productName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.type')">
            <el-select
              v-model="formInline.classid"
              placeholder
              filterable>
              <el-option
                v-for="(item,index) in classOptions"
                :key="index"
                :label="item.className"
                :value="item.classId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.stock.variabledate')" class="date-picker">
            <el-date-picker
              v-model="variabledate"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              :start-placeholder="$t('m.otherstore.startdate')"
              :end-placeholder="$t('m.otherstore.enddate')"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange">
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <!-- <el-table-column align="center" prop="classid" :label="$t('m.type')">
        <template slot-scope="scope">
          1 销售订单、2 上架入库、3 其它入库
          <span v-if="scope.row.classid==1">{{$t('m.in.class1')}}</span>
          <span v-if="scope.row.classid==2">{{$t('m.in.class2')}}</span>
          <span v-if="scope.row.classid==3">{{$t('m.in.class3')}}</span>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="classname" :label="$t('m.type')"></el-table-column>
      <el-table-column align="center" prop="code" :label="$t('m.stock.code')"></el-table-column>
      <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
      <el-table-column align="center" prop="productname" :label="$t('m.in.productname')" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" :label="$t('m.page.partition')">
        <template slot-scope="scope">{{scope.row.partitionid|partitionFilters}}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="locationcode"
        :label="$t('m.page.location')+$t('m.code')"
      ></el-table-column>
      <el-table-column align="center" prop="inquantity" :label="$t('m.otherstore.inquantity')"></el-table-column>
      <el-table-column align="center" prop="outquantity" :label="$t('m.stock.outquantity')"></el-table-column>
      <el-table-column
        align="center"
        prop="beforequantity"
        :label="$t('m.stock.beforequantity')"
      ></el-table-column>
      <el-table-column align="center" prop="afterquantity" :label="$t('m.stock.afterquantity')"></el-table-column>
      <el-table-column align="center" prop="creator" :label="$t('m.stock.creator')"></el-table-column>
      <el-table-column align="center" :label="$t('m.stock.createdate')">
        <template slot-scope="scope">{{scope.row.createdate|createdateFilter}}</template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper"
      :page-sizes="pageSizeList"
      :page-size="rowSize"
      :current-page="page"
      :total="totalRows"
      @current-change="currentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <!-- table数据展示 end -->
  </div>
</template>
<script>
let __this
export default {
  name:'stockInfo',
  data(){
    return {
      formInline:{
        warehouseId:'', // 仓库
        partitionId:'', // 库区
        locationCode:'', // 库位
        productSpecCode:'', // sku
        productName:'', // 产品名称
        classid:0 // 类型id
      },
      variabledate:[], // 变动时间
      partitionOptions:[], // 库区名及id
      classOptions:[], // 类型名及id

      tableData:[]
    }
  },
  beforeCreate(){
    __this = this
  },
  mounted(){
    this.getStockType()
    this.getData()
    this.getPartition()
  },
  computed:{
    dateRange(){
      let [startdate='', enddate=''] = this.variabledate || Array.from(2)
      return {
        startdate, //审核时间--start
        enddate //审核时间--end
      }
    }
  },
  filters:{
    createdateFilter(value){
      return value.substring(0, value.indexOf('.')).replace('T', ' ')
    },
    partitionFilters(val){
      if (__this.partitionOptions.length){
        let item = __this.partitionOptions.find(item => {
          return item.partitionid === val
        })
        return item?item.partitionname:''
      } else {
        return ''
      }
    }
  },
  watch:{
    '$i18n.locale'(){
      this.getData()
      this.getPartition()
    }
  },
  methods:{
    search(){
      this.page = 1
      this.getData()
    },
    getData(){
      let warehouseId = this.$store.state.basicInfo.warehouseInfo.id
      let data = Object.assign({}, this.formInline, this.dateRange, {
        pageIndex:this.page,
        pageSize:this.rowSize,
        warehouseId
      })
      if (!data.partitionId) data.partitionId = 0

      let options = {
        withCredentials:false,
        method:'post',
        url:`${window._config_.stockUrl}/api/StockHistory/GetStockHistoryList`,
        data
      }
      this.tableLoading = true
      this.$axios(options).then(({ data,count }) => {
        this.tableData = this.cloneObject(data)
        this.totalRows = count
        setTimeout(()=>this.tableLoading=false,500)
        this.tableData = this.tableData.map(item => {
          if (!item.modifier) item.modifier = '---'
          return item
        })
        if (!this.tableData.length)
          return this.callbackMessage(this.$t('m.nodata'))
      })
    },
    // 根据仓库id获取对应库区
    getPartition(){
      let warehouseid = this.$store.state.basicInfo.warehouseInfo.id
      let options = {
        method:'get',
        url:`/partition/list/${warehouseid}`,
        params:{ warehouseid }
      }
      this.$axios(options).then(({ data }) => {
        this.partitionOptions = data.list
        this.partitionOptions.unshift({
          partitionname:this.$t('m.all'),
          partitionid:''
        })
      })
    },
    // 获取出入库类型
    getStockType(){
      let options = {
        method:'get',
        url:`/api/getallstockclass`
      }
      this.$axios(options).then(({ data }) => {
        this.classOptions = data
        this.$nextTick(()=>{
          this.classOptions.unshift({classId:0, className:'全部'})
        })
      })
    },
    wareHouseSelected(id){
      this.formInline.partitionId = ''
      this.getPartition(id)
    },
    //  判断用户是否已经选择了库区
    hasPartitionOptions(visible){
      if (visible){
        if (!this.partitionOptions.length)
          return this.callbackMessage(this.$t('m.stock.step'))
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
</style>